import { defineComponent } from 'vue';
import './index.scss';

export default defineComponent({
  name: 'Card',
  props: {
    title: {
      type: String,
      default: '',
    },
    bgColor:{
      type: String,
      default: '#fff',
    },
    size: {
      type: String,
      default: 'default',
    },
  },
  setup(props, { slots }) {
    const { tool, footer } = slots
    const classNames = ['card-container']
    if (props.size) {
      classNames.push(`p_${props.size}`)
    }
    const styles = {
      backgroundColor: props.bgColor,
    }
    return () => {
      return (<view className={classNames.join(' ')} style={styles}>
        <view className="card-header align-items_center justify_between">
          <view className="weight_bolder">
            {props.title}
          </view>
          <view>
            {
              tool && tool()
            }
          </view>
        </view>
        <view className="card-body">
          {
            slots.default && slots.default()
          }
        </view>
        {
          footer && <view className="card-footer">{
            footer()
          }</view>
        }

      </view>);
    }
  },
});